<template>
	<wd-navbar title="地址库管理" :bordered="false" placeholder safeAreaInsetTop right-text="添加" left-arrow
		@click-left="clickHeaderLeft" >
		<template #right>
			<wd-icon name="add-circle" size="18" @click-right="clickHeaderRight"/>
		</template>
	</wd-navbar>
	<view class="area_list">
		<view class="area_list_li" v-for="(a,index) in areaList" @click="clickArea(a,index)">
			<image class="area-image" :src="a.image" mode=""></image>
			<view class="area-content">
				<text class="area-name">{{a.name}}</text>
				<text class="area-mark">{{a.mark}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"
	import {
		reactive,
		ref
	} from 'vue'

	import {
		onReady,
		onReachBottom
	} from "@dcloudio/uni-app"

	const areaList = reactive([])
	
	function clickHeaderLeft(){
		uni.navigateBack()
	}
	
	function clickHeaderRight(){
		
	}
	function clickArea(item, index) {
		uni.navigateTo({
			url: "/pages/Mange/System/area/address_list"
		})
	}

	// 删除国家
	function deleteArea() {
		let url = "/address/deleteCountry"
		let id = null
		overallRequest(url, {
			methods: "POST",
			data: {
				id
			}
		}).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}

	// 获取国家列表
	function getAreaList() {
		let url = "/address/countryList"
		overallRequest(url).then(res => {
			console.log(res);

			let {
				list
			} = res.data

			areaList.push(...list)

		}).catch(err => {
			console.log(err);
		})
	}
	onReady(() => {
		getAreaList()
	})

	// 滚动页面到底部
	onReachBottom(() => {


	})
</script>

<style>
	
	.navbar-right{
		display: flex;
		gap: 25rpx;
		align-items: center;
	}
	
	.area_list_li {
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx;
		padding-right: 35rpx;
		border-bottom: 1rpx solid #c3c3c344;
	}

	.area_list_li:active {
		background-color: #c3c3c344;
	}

	.area-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: gray;
		margin: 0rpx 25rpx;
	}

	.area-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100;
	}

	.area-name {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.area-mark {
		font-size: 24rpx;
		color: gray;
	}
</style>